<template>
  <div>
    <el-form ref="couponSRef" :inline="true" :model="couponCl.couponS">
      <el-form-item label="名称：" prop="name">
        <el-input v-model="couponCl.couponS.name" placeholder="名称" type="text"></el-input>
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-select v-model="couponCl.couponS.type" placeholder="类型">
          <el-option v-for="item in couponCl.couponTypeList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="优惠券折扣类型" prop="discountType">
        <el-select v-model="couponCl.couponS.discountType" placeholder="类型">
          <el-option v-for="item in couponCl.discountTypeList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="优惠券时间类型" prop="timeType">
        <el-select v-model="couponCl.couponS.timeType" placeholder="类型">
          <el-option v-for="item in couponCl.couponTimeList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search()">搜索</el-button>
        <el-button type="primary" @click="resetS(couponSRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-button type="primary" @click="opendialog()">
          <el-icon>
            <Plus />
          </el-icon>
          添加优惠券
        </el-button>
      </el-col>
    </el-row>
  </div>
  <div>
    <el-table :data="couponCl.couponTable" stripe style="width: 100%">
      <el-table-column align="center" label="序号" type="index" width="80">
        <template #default="scope">
          {{ (couponCl.couponS.page - 1) * couponCl.couponS.size + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" label="名称" prop="name" />
      <el-table-column align="center" header-align="center" label="类型" prop="type">
        <template #default="scope">
          {{ scope.row.type.desc }}
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" label="折扣类型" prop="discountType">
        <template #default="scope">
          {{ scope.row.discountType.desc }}
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" label="最小使用金额" prop="minAmount" />
      <el-table-column align="center" header-align="center" label="金额/折扣" prop="amount" />
      <el-table-column align="center" header-align="center" label="时间类型" prop="timeType">
        <template #default="scope">
          {{ scope.row.timeType.desc }}
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" label="总数" prop="totalCount" />
      <el-table-column align="center" header-align="center" label="限领次数" prop="limitNum" />
      <el-table-column align="center" header-align="center" label="状态" prop="work">
        <template #default="scope">
          <el-switch v-model="scope.row.work" :active-value="true" :inactive-value="false" active-text="是" inactive-text="否" inline-prompt @change="chengWork(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" label="创建时间" prop="createTime" />
      <el-table-column align="center" fixed="right" header-align="center" label="操作" width="220">
        <template #default="scope">
          <el-button link size="small" type="primary" @click="toEdit(scope.row.id)">编辑 </el-button>
          <el-button link size="small" type="primary" @click="addGoods(scope.row.id)" v-if="scope.row.type.name === 'GOODS'">添加产品 </el-button>
          <el-popconfirm title="确定要删除吗?" @confirm="deleteCoupons(scope.row.id)">
            <template #reference>
              <el-button link type="primary">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div>
    <el-dialog v-model="couponCl.couponDialog" destroy-on-close title="添加优惠券" @close="resetDialog(couponRef)">
      <el-form ref="couponRef" :model="couponCl.couponEdit" :rules="couponCl.couponRule">
        <el-row :gutter="10" class="row-bg">
          <el-col :span="24">
            <el-form-item label="名称" prop="name">
              <el-input v-model="couponCl.couponEdit.name" placeholder="名称" type="text"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="类型" prop="type">
              <el-select v-model="couponCl.couponEdit.type" placeholder="类型">
                <el-option v-for="item in couponCl.couponTypeList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="优惠券折扣类型" prop="discountType">
              <el-select v-model="couponCl.couponEdit.discountType" placeholder="类型">
                <el-option v-for="item in couponCl.discountTypeList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最小使用金额" prop="minAmount">
              <el-input-number v-model="couponCl.couponEdit.minAmount" :max="10000" :min="0" :step="1" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="金额/折扣" prop="amount">
              <el-input-number v-model="couponCl.couponEdit.amount" :max="10000" :min="0" :step="1" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="时间类型" prop="timeType">
              <el-select v-model="couponCl.couponEdit.timeType" @change="changeTime" placeholder="类型">
                <el-option v-for="item in couponCl.couponTimeList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <span v-if="couponCl.isHaveTime">
              <el-form-item label="有效时间" prop="startEndTime">
                <PickDate v-model:dateTime="couponCl.couponEdit"></PickDate>
              </el-form-item>
            </span>
            <span v-if="couponCl.isHaveDate">
              <el-form-item label="有效天数" prop="days">
                <el-input-number v-model="couponCl.couponEdit.days" :max="10000" :min="0" :step="1" />
              </el-form-item>
            </span>
          </el-col>
          <el-col :span="12">
            <el-form-item label="总数" prop="totalCount">
              <el-input-number v-model="couponCl.couponEdit.totalCount" :max="10000" :min="0" :step="1" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="限领数" prop="limitNum">
              <el-input-number v-model="couponCl.couponEdit.limitNum" :max="10000" :min="0" :step="1" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="描述" prop="describes">
              <el-input v-model="couponCl.couponEdit.describes" :rows="3" type="textarea" placeholder="请输入描述" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <Editor v-model:editorValue="couponCl.couponEdit.remark"></Editor>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="editCoupon">保存 </el-button>
          <el-button @click="couponCl.couponDialog = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
  <div>
    <el-dialog v-model="couponCl.goodsDialog" destroy-on-close title="添加优惠券" @close="resetGoodsDialog(couponRef)">
      <Transfer v-model:title="couponCl.title" v-model:leftTable="couponCl.goodsTable" v-model:rightTable="couponCl.checkedGoods" @selectLeftPage="allGoodsPage"></Transfer>
      <el-button type="primary" @click="couponBindGoods">保存 </el-button>
      <el-button @click="couponCl.goodsDialog = false">取消</el-button>
    </el-dialog>
  </div>
  <Page :pageData="couponCl.couponS" @selectPage="search"></Page>
</template>
<script lang="ts" setup>
import { couponClass } from '@/page/types/market/coupon'
import { addCoupon, updateCoupon, pageCoupon, detailCoupon, couponAddGoods, getCheckedGoods, deleteCoupon } from '@/api/market'
import { goodsPage } from '@/api/sale'

import { ElMessage, FormInstance } from 'element-plus/es'
import Editor from '@/components/MyEditor.vue'
import PickDate from '@/components/PickDate.vue'
import Transfer from '@/components/Transfer.vue'
const couponCl = reactive(new couponClass())
const couponSRef = ref()
const couponRef = ref()
const search = () => {
  pageCoupon(couponCl.couponS).then(res => {
    couponCl.couponTable = res.data.records
    couponCl.couponS.page = res.data.current
    couponCl.couponS.size = res.data.size
    couponCl.couponS.total = res.data.total
  })
}
const resetS = (form: FormInstance | undefined) => {
  if (!form) return
  form.resetFields()
  search()
}
const chengWork = (row: any) => {
  const data = {
    id: row.id,
    work: row.work
  }
  updateCoupon(data).then(res => {
    ElMessage({
      message: row.work ? '禁用优惠券成功' : '开启优惠券成功',
      type: 'success'
    })
  })
}
const opendialog = () => {
  couponCl.couponDialog = true
}
const toEdit = id => {
  detailCoupon(id).then(res => {
    couponCl.couponEdit = res.data
    couponCl.couponDialog = true
    couponCl.couponEdit.timeType = res.data.timeType.name
    couponCl.couponEdit.type = res.data.type.name
    couponCl.couponEdit.discountType = res.data.discountType.name
  })
}
const resetDialog = (rest: FormInstance | undefined) => {
  if (!rest) return
  rest.resetFields()
  couponCl.couponEdit = {}
}
const resetGoodsDialog = (rest: FormInstance | undefined) => {
  if (!rest) return
  rest.resetFields()
  couponCl.goodsTable = {}
}
const editCoupon = () => {
  if (couponCl.couponEdit.id) {
    updateCoupon(couponCl.couponEdit).then(res => {
      search()
      ElMessage({
        message: '更新优惠券信息成功',
        type: 'success'
      })
    })
  } else {
    addCoupon(couponCl.couponEdit).then(res => {
      search()
      ElMessage({
        message: '添加优惠券成功',
        type: 'success'
      })
    })
  }
  couponCl.couponDialog = false
}
const changeTime = () => {
  if (couponCl.couponEdit.timeType == 'FIXED_DAY') {
    couponCl.isHaveDate = true
    couponCl.isHaveTime = false
    couponCl.couponEdit.startTime = ''
    couponCl.couponEdit.endTime = ''
  } else {
    couponCl.couponEdit.days = 0
    couponCl.isHaveDate = false
    couponCl.isHaveTime = true
  }
}
const addGoods = (id: string) => {
  couponCl.addGoodsCouponId = id
  allGoodsPage()
  getGoodsByCouponId(id)
}
const allGoodsPage = () => {
  couponCl.goodsTable.size = 7
  goodsPage(couponCl.goodsTable).then(res => {
    couponCl.goodsTable = res.data
  })
}
const getGoodsByCouponId = (id: string) => {
  getCheckedGoods(id).then(res => {
    couponCl.checkedGoods = res.data
    couponCl.goodsDialog = true
  })
}
const deleteCoupons = (id: string) => {
  deleteCoupon(id).then(res => {
    search()
    ElMessage({
      message: '删除优惠券成功',
      type: 'success'
    })
  })
}
const couponBindGoods = () => {
  const productIds = couponCl.checkedGoods.map(s => s.id)
  couponAddGoods(couponCl.addGoodsCouponId, productIds).then(res => {})
}
onMounted(() => {
  search()
})
</script>
<style lang="scss" scoped>
.el-select {
  width: 200px;
}
</style>
